<template>
  <div class="app-container">
    <div v-if="!isManage">
      <div class="filter-container">
        <!-- <el-button
          class="filter-item"
          type="primary"
          v-perm="'recommend_share:share-add'"
          size="small"
          v-waves
          icon="el-icon-plus"
          @click="handleAdd"
        >添加</el-button> -->
        <el-input
          @keyup.enter.native="loadData"
          style="width: 200px;"
          size="small"
          clearable
          class="filter-item"
          placeholder="活动名称"
          v-model="queryParams.title"
        ></el-input>
        <el-select
          style="width: 200px;"
          size="small"
          clearable
          class="filter-item"
          placeholder="状态"
          v-model="queryParams.status"
        >
          <el-option
            v-for="(item,itemIndex) in statusOptions"
            :key="itemIndex"
            :label="item"
            :value="itemIndex"
          ></el-option>
        </el-select>
        <el-select
          style="width: 200px;"
          size="small"
          clearable
          class="filter-item"
          placeholder="奖品类型"
          v-model="queryParams.awardType"
        >
          <el-option
            v-for="(item,itemIndex) in pointsOptions"
            :key="itemIndex"
            :label="item"
            :value="itemIndex"
          ></el-option>
        </el-select>
        <el-button
          class="filter-item"
          type="primary"
          size="small"
          v-waves
          icon="el-icon-search"
          @click="loadData"
        >搜索</el-button>
      </div>
      <el-table
        :data="dataList"
        :height="tableHeight"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        border=""
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="80" fixed="left"></el-table-column>
        <el-table-column align="center" prop="title" label="活动名称" width="200" fixed="left"></el-table-column>
        <el-table-column align="center" prop="startTime" label="开始时间" width="160">
          <template slot-scope="scope">
            <div>{{scope.row.startTime}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="endTime" label="结束时间" width="160">
          <template slot-scope="scope">
            <div>{{scope.row.endTime}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status|statusTagFilter">{{scope.row.status|statusFilter}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="awardType" label="奖品类型" width="100">
          <template slot-scope="scope">{{scope.row.awardType|pointsFilter}}</template>
        </el-table-column>
        <el-table-column align="center" prop="ecticketCodes" label="电子券号" width="200"></el-table-column>
        <el-table-column align="center" prop="awardPointsNum" label="奖励积分设置" width="120"></el-table-column>
        <el-table-column align="center" prop="awardDailyCount" label="每天奖励次数限制" width="140"></el-table-column>
        <el-table-column align="center" prop="themeLimitFlag" label="限定专区购买" width="160">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.themeLimitFlag|statusTagFilter"
            >{{scope.row.themeLimitFlag|yesNoFilter}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" width="160">
          <template slot-scope="scope">
            <div>{{scope.row.createTime}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="modifyTime" label="修改时间" width="160">
          <template slot-scope="scope">
            <div>{{scope.row.modifyTime}}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="260"
          fixed="right"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              v-perm="'recommend_share:share-manager'"
              size="mini"
              @click="manageGoods(scope.row.id)"
            >商品管理</el-button>
            <el-button
              type="primary"
              v-perm="'recommend_share:share-edit'"
              size="mini"
              @click="handleEdit(scope.row)"
            >修改</el-button>
            <!-- <el-button
              type="danger"
              v-perm="'recommend_share:share-remove'"
              size="mini"
              @click="handleRemove(scope.row)"
            >删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background=""
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.pageNo"
          :page-sizes="[10,20,30,50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataTotal"
        ></el-pagination>
      </div>
      <el-dialog title="详情" :visible.sync="isCurrentUserLevelShowed">
        <div class="title">{{formData.title}}</div>
        <div class="content">
          <div v-html="formData.content"></div>
        </div>
      </el-dialog>
      <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="isFormDialogShowed" width="1000px">
        <el-form
          class="dialog-form"
          :rules="formRules"
          ref="dataForm"
          :model="formData"
          label-position="left"
          label-width="140px"
        >
          <el-form-item label="活动名称" prop="title">
            <el-input v-model="formData.title" maxlength="50" placeholder="请输入活动名称"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  v-model="formData.startTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  type="datetime"
                  placeholder="选择活动开始时间"
                  :picker-options="pickerOptions1"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                  v-model="formData.endTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  type="datetime"
                  placeholder="选择活动结束时间"
                  :picker-options="pickerOptions1"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="奖品类型" prop="awardType">
                <el-radio
                  v-model="formData.awardType"
                  v-for="(item,itemIndex) in pointsOptions"
                  :key="itemIndex"
                  :label="itemIndex-0"
                >{{item}}</el-radio>
              </el-form-item>
              <el-form-item label="电子券号" prop="ecticketCodes" v-if="formData.awardType===2">
                <el-input
                  type="textarea"
                  :rows="5"
                  v-model="formData.ecticketCodes"
                  placeholder="请输入电子券号"
                ></el-input>
              </el-form-item>
              <el-form-item label="奖励积分设置" prop="awardPointsNum" v-if="formData.awardType===1">
                <el-input-number v-model="formData.awardPointsNum" :min="0" placeholder="请输入奖励积分设置"></el-input-number>
              </el-form-item>
              <el-form-item label="每天奖励次数限制" prop="awardDailyCount">
                <el-input-number
                  :min="0"
                  v-model="formData.awardDailyCount"
                  placeholder="请输入每天奖励次数限制"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="封面（750*300）" prop="cover">
                <el-upload
                  class="avatar-uploader"
                  :action="UPLOAD_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess('cover')"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="formData.cover" :src="formData.cover|absUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="限定专区购买" prop="themeLimitFlag">
            <el-radio
              v-model="formData.themeLimitFlag"
              v-for="(item,itemIndex) in yesNoOptions"
              :key="itemIndex"
              :label="itemIndex"
            >{{item}}</el-radio>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio
              v-model="formData.status"
              v-for="(item,itemIndex) in statusOptions"
              :key="itemIndex"
              :label="itemIndex"
            >{{item}}</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isFormDialogShowed = false">取消</el-button>
          <el-button type="primary" :loading="isSubmiting" @click="handleSubmitForm">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
const statusOptions = ['下线', '上线']
const yesNoOptions = ['否', '是']
const statusTags = ['danger', 'primary']
const pointsOptions = { 1: '积分', 2: '电子券' }
export default {
  name: 'index',
  watch: {
    $route () {
      if (this.$route.name == 'recommend_share.goods.manage') {
        this.isManage = true
      } else {
        this.isManage = false
      }
    }
  },
  filters: {
    statusFilter (v) {
      return statusOptions[v]
    },
    statusTagFilter (v) {
      return statusTags[v]
    },
    pointsFilter (v) {
      return pointsOptions[v]
    },
    yesNoFilter (v) {
      return yesNoOptions[v]
    }
  },
  data () {
    return {
      isManage: false,
      statusOptions,
      pointsOptions,
      yesNoOptions,
      pickerOptions1: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      formRules: {
        title: [
          {
            required: true,
            message: '请输入活动名称'
          }
        ],
        cover: [
          {
            required: true,
            message: '请上传奖品封面'
          }
        ],
        startTime: [
          {
            required: true,
            message: '请输入开始时间'
          }
        ],
        endTime: [
          {
            required: true,
            message: '请输入结束时间'
          }
        ],
        status: [
          {
            required: true,
            message: '请输入状态'
          }
        ],
        awardType: [
          {
            required: true,
            message: '请输入奖品类型'
          }
        ],
        ecticketCodes: [
          {
            required: true,
            message: '请输入电子券号'
          }
        ],
        awardPointsNum: [
          {
            required: true,
            message: '请输入奖励积分设置'
          }
        ],
        awardDailyCount: [
          {
            required: true,
            message: '请输入每天奖励次数限制'
          }
        ],
        themeLimitFlag: [
          {
            required: true,
            message: '请选择是否限定专区购买'
          }
        ],
        createTime: [
          {
            required: true,
            message: '请输入创建时间'
          }
        ],
        modifyTime: [
          {
            required: true,
            message: '请输入修改时间'
          }
        ]
      },

      formData: {
        cover: ''
      },
      isSubmiting: false,
      isFormDialogShowed: false,
      isCurrentUserLevelShowed: false,
      dataList: [],
      dataTotal: 0,
      isEditing: false,
      tableHeight: 300
    }
  },
  created () {
    if (this.$route.name == 'recommend_share.goods.manage') {
      this.isManage = true
    } else {
      this.isManage = false
    }
    this.tableHeight = window.innerHeight - 300
    this.loadData()
  },
  methods: {
    manageGoods (id) {
      this.$router.push('/recommend_share/share/goods_manage?id=' + id)
    },
    handleRemove (row) {
      this.$$comfirm('确认删除该记录吗', _ => {
        this.$post('/admin/share_activity/remove-by-id', { id: row.id }).then(
          _ => {
            this.$success()
            this.loadData()
          }
        )
      })
    },
    handleAdd () {
      this.isFormDialogShowed = true
      this.formData = {}
      this.isEditing = false
    },
    handleViewNote (row) {
      this.formData = row
      this.isCurrentUserLevelShowed = true
    },
    handleAvatarSuccess (imgField) {
      return (res, file) => {
        if (res && res.errcode == 0) {
          this.formData[imgField] = res.info
        }
      }
    },
    handleEdit (row) {
      this.isFormDialogShowed = true
      this.isEditing = true
      this.formData = Object.assign({}, row)
    },
    handleCurrentChange (pageNo) {
      this.queryParams.pageNo = pageNo
      this.loadData()
    },
    handleSizeChange (pageSize) {
      this.queryParams.pageSize = pageSize
      this.loadData()
    },
    handleSubmitForm () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.isSubmiting = true
          this.$post(
            this.isEditing
              ? '/admin/share_activity/update'
              : '/admin/share_activity/create',
            this.formData
          )
            .then(() => {
              this.loadData()
              this.isFormDialogShowed = false
              this.$$notify()
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    loadData () {
      this.listLoading = true
      this.$get('/admin/share_activity/list', this.queryParams)
        .then(data => {
          this.dataList = data.rows
          this.dataTotal = data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

  <style scoped lang="scss">
.title {
  text-align: center;
  padding: 0 0 20px 0;
  font-size: 20px;
}

.content {
  line-height: 2;
}
</style>
